import { XxpageContainer } from "@/ui";
import styles from "./src/style/index.module.scss";
import React, { useState, useCallback, useEffect, useRef } from "react";
import { setMapCenterAndZoom, addMark, addMapMask, getPoint } from "./src/component/mapUtils";
import { Button, Space } from "antd";
import stylesJson from "./src/style/stylesJson.json"
const BaiduMap = () => {
    const [map, setMap] = useState(null);
    const mapRef = useRef();

    // 初始化地图实例
    const initMapInstance = ({
        el,
        zoom = 15,
        initConfig = {}
    }) => {
        var mp = new BMapGL.Map(el, initConfig);
        setMap(mp);
        mp.centerAndZoom(new BMapGL.Point(121.491, 31.233), zoom);
        mp.enableScrollWheelZoom(true);
        mp.setMapStyleV2({ styleJson: stylesJson });
    }


    useEffect(() => {
        if (mapRef) {
            initMapInstance({
                el: mapRef.current
            })
        }



    }, [mapRef])

    useEffect(() => {
        return () => {
            setMap(null);
        }
    }, [])

    return (
        <>
            <XxpageContainer>
                <div className="btn">
                    <Space>
                        <Button onClick={() => setMapCenterAndZoom({ Instance: map, cityName: "广州市" })}>设置中心为广州市</Button>
                        <Button onClick={() => addMapMask({ Instance: map, cityName: "广东省", zoom: 10 })}>添加广州市掩膜</Button>
                        <Button onClick={() => getPoint({
                            address: "杭州市西湖区", callBack: (point) => {
                                console.log("得出地址：", point)
                            }
                        })}>解析地址</Button>
                        <Button onClick={() => getPoint({
                            address: "广州市",
                            callBack: (point) => {

                                addMark({
                                    Instance: map,
                                    point: point,
                                })
                            }
                        })}>获取广州市的point并添加标记</Button>
                    </Space>
                </div>
                <div className={styles.baiduMap}>
                    <div ref={mapRef} id="mapContainer" className="baiduMap-container" style={{
                        width: "100%",
                        height: "100%"
                    }}>


                    </div>
                    {/* 信息浮层 */}
                    <div className="float-container">
                        <div className="background">
                            
                        </div>
                    </div>
                </div>
            </XxpageContainer>
        </>
    )
}
export default BaiduMap;